<template>
  <div class="car">
    <Title></Title>
    <div class="car_box">
      <div class="inner">
        <div class="car_info" v-if="cararr.length>0">
          <div class="car_much">
            全部商品（{{cararr.length}}）
          </div>
          <div class="car_content">
            <div class="car_tititem">
              <el-checkbox v-model="checkedAll" @change="selectall" fill="#292929" text-color="#292929">全选</el-checkbox>
            </div>
            <div class="car_tititem">
              商品
            </div>
            <div class="car_tititem">
              单价
            </div>
            <div class="car_tititem">
              数量
            </div>
            <div class="car_tititem">
              操作
            </div>
          </div>
          <div class="car_list" v-for="(item,index) in cararr" :key="index">
            <div class="car_list_tit" >
              <div>
                <el-checkbox v-model="item.checked" fill="#292929" text-color="#292929" @change="select(index)">{{item.create_time}}</el-checkbox>
              </div>
              <div>
              </div>
              <div class="del" @click="delcarfn(index)">
                删除
              </div>
            </div>
            <div class="car_item" >
              <div class="car_img">
                <img :src="[item.goods_img]" alt="" srcset="">
                <div class="car_name">

                </div>
              </div>
              <div class="car_price">
                ￥{{item.goods_sku_price}}
              </div>
              <div class="car_num">
                <span @click="addfn(0,index)">-</span>
                <span>{{item.car_num}}</span>
                <span @click="addfn(1,index)">+</span>
              </div>
            </div>
          </div>
          <div class="car_total">
            <div class="car_total_price">
              已选商品{{totalnum}}件（不含运营费）<span>￥{{totalprice}}</span>
            </div>
            <div class="car_btn" @click="orderfn(totalnum)">
              去结算
            </div>
          </div>
        </div>
        <div class="car_none" v-else >
            <img src="../../assets/car_none.png" alt="" srcset="">
            <div class="car_none_btn" @click="pageurl">
              去逛逛
            </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
  import Title from "../../components/title.vue"
  import {getcarapi,editcarapi,delcarapi} from "../../api/http.js"
  export default {
    name: 'car',
    data() {
      return {
        cararr:[],
        checkedAll: false
      }
    },
    created() {
     this._getcar()
    },
    computed:{
      totalprice(){
        var money = 0
        this.cararr.map((item,i)=>{
          // console.log(item);
          if(item.checked){
            money +=item.goods_sku_price*item.car_num
          }
        })
        return money
      },
      totalnum(){
        var num = 0
        this.cararr.map((item,i)=>{
          if(item.checked){
            num +=item.car_num
          }
        })
        return num
      }
    },
    methods:{
      // 获取购物车数据
      async _getcar(){
        const res = await getcarapi()
        console.log(res.data.data);
        if(res.data.code ==200){
           if(res.data.data.data.length!=0){
               for (var i = 0; i < res.data.data.data.length; i++) {
                 res.data.data.data[i].checked=false
               }
            }
            this.cararr = res.data.data.data
        }else{
            this.cararr=[]
        }
      },
      pageurl(){
        this.$router.push({
          path:"/home"
        })
      },
      // 删除购物车
     async delcarfn(index){
         this.cararr.splice(index,1)
         const res = await delcarapi({ids:this.cararr[index].sku_id})
         console.log(this.cararr[index]);
         if(res.data.code==200){
           this.$message(res.data.msg)
         }else{
           this.$message(res.data.msg)
         }

      },
      // 数量的加减
     async addfn(num,index){
          if(num==0){
            if(this.cararr[index].car_num<=1){
              return this.$message("购买数量不能小于1")
            }
            this.cararr[index].car_num--
          }else{
            this.cararr[index].car_num++
          }
           const res =await editcarapi({ id:this.cararr[index].car_id,goods_id:this.cararr[index].goods_id,car_num:this.cararr[index].car_num,sku_id:this.cararr[index].sku_id})
           if(res.data.code==200){
             this.$message(res.data.msg)
           }else{
             this.$message(res.data.msg)
           }
      },
      // 全选
      selectall(){
        if (this.checkedAll) {
          this.cararr.map((item,i)=>{
              return item.checked = true
          })
        } else{
            this.cararr.map((item,i)=>{
                return item.checked = false
            })
        }
      },
      // 商品单选
      select(index){
         var result = this.cararr.map((item,i)=>{
              return item.checked
         })
         var bool = result.every((item,i)=>{
             return item==true
         })
         if(bool){
           this.checkedAll= true
         }else{
           this.checkedAll = false
         }
      },
      orderfn(orderfn){
        console.log();
        if(orderfn==0){
          return this.$message("请先选择购买商品")
        }
        var list = this.cararr
         var order = {
            goods_sku_id:"",
            goods_num:""
        }
        // 把商品的规格id和商品数量拼成字符串
        for (let i = 0; i < list.length; i++) {
            if(list[i].checked){
                order.goods_sku_id= order.goods_sku_id + list[i].sku_id +",";
                order.goods_num= order.goods_num + list[i].car_num +","
            }
        }
        // 删除字符串最后的逗号
        order.goods_sku_id= order.goods_sku_id.substring(0,order.goods_sku_id.length-1);
        order.goods_num= order.goods_num.substring(0,order.goods_num.length-1);
        this.$router.push({
          path:"/order",
          query: {
            order:JSON.stringify(order)
          }
        })
      }
    },
    components: {
      Title
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    border-color: #F32823 !important;
    background-color: #F32823 !important;
  }

  /deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
    color: #292929 !important;
  }

  /deep/ .el-checkbox__inner:hover {
    border-color: #F32823 !important;
  }

  /deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
    border-color: #F32823 !important;
  }

  .car_box {
    width: 100%;
    .inner {
      width: 1300px;
      margin: 0 auto;
      padding: 20px 85px;
      box-sizing: border-box;
      .car_none{
        width: 100%;
        height: 527px;
        background: #F3F3F3;
        border: 1px solid #F3F3F3;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        img{

        }
        .car_none_btn{
          width: 83px;
          height: 32px;
          background: #FEF0F0;
          border: 1px solid #FF4444;
          border-radius: 40px;
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          color: #FF4444;
          cursor: pointer;
        }
      }
      .car_info{
        width: 100%;
        .car_much {
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #FF4444;
          margin-bottom: 15px;
        }

        .car_content {
          width: 100%;
          height: 38px;
          background: #EAF8FF;
          border: 1px solid #9EDFFF;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 20px;

          .car_tititem {
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
          }

        }

        .car_total {
          width: 100%;
          height: 40px;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 14px;
          .car_total_price {
            span {
              color: #FF4444;
              margin-left: 10px;
            }
          }

          .car_btn {
            width: 83px;
            height: 32px;
            line-height: 32px;
            background: #FF4444;
            border-radius: 40px;
            text-align: center;
            color: #FFFFFF;
            margin-left: 20px;
             cursor: pointer;
          }
        }

        .car_list {
          margin-bottom: 20px;

          .car_list_tit {
            width: 100%;
            height: 38px;
            background: #EAF8FF;
            border: 1px solid #9EDFFF;
            display: flex;
            justify-content: center;
            align-items: center;

            .del {
              cursor: pointer;
            }
            div {

              &:nth-of-type(1) {
                width: 30%;
                padding-left: 80px;
              }

              &:nth-of-type(3) {
                width: 20%;
                text-align: center;
              }

              &:nth-of-type(2) {
                width: 50%;
                text-align: left;
              }
            }

          }

          .car_item {
            width: 100%;
            height: 120px;
            border: 1px solid #CCCDCE;
            border-top: none;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .car_img {
              width: 620px;
              height: 100%;
              padding: 20px 50px;
              box-sizing: border-box;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              img {
                width: 80px;
                height: 80px;
                border-radius: 4px;
              }

              .car_name {
                font-size: 14px;
                line-height: 22px;
                color: #292929;
                padding-left: 10px;
              }
            }

            .car_price {
              flex: 1;
              font-size: 14px;
              color: #FF4444;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
              border-left: 1px solid #CCCDCE;
              border-right: 1px solid #CCCDCE;
            }

            .car_num {
              flex: 1;
              height: 100%;
              display: flex;
              justify-content: center;
              align-items: center;
               
              span {
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                display: block;
                background: rgba(225, 227, 229, 0.67);
                border-radius: 2px;
                cursor: pointer;

                &:nth-of-type(2) {
                  width: 60px;
                  margin: 0 5px;
                }
              }
            }
          }
        }

      }
    }
  }
</style>
